<template>
  <div class="settings-container">
    <el-card class="settings-card">
      <template #header>
        <div class="settings-header">
          <h2>
            <el-icon><Setting /></el-icon>
            系统设置
          </h2>
        </div>
      </template>

      <el-tabs v-model="activeTab" class="settings-tabs">
        <!-- 主题设置 -->
        <el-tab-pane label="主题设置" name="theme">
          <div class="setting-section">
            <h3>
              <el-icon><Sunny /></el-icon>
              外观主题
            </h3>
            <p class="section-description">选择您喜欢的界面主题</p>
            
            <div class="theme-options">
              <div 
                class="theme-option" 
                :class="{ active: currentTheme === 'light' }"
                @click="setTheme('light')"
              >
                <div class="theme-preview light-preview">
                  <div class="preview-header"></div>
                  <div class="preview-content">
                    <div class="preview-card"></div>
                    <div class="preview-card"></div>
                  </div>
                </div>
                <div class="theme-info">
                  <h4>
                    <el-icon><Sunny /></el-icon>
                    浅色主题
                  </h4>
                  <p>适合白天使用的明亮界面</p>
                </div>
              </div>

              <div 
                class="theme-option" 
                :class="{ active: currentTheme === 'dark' }"
                @click="setTheme('dark')"
              >
                <div class="theme-preview dark-preview">
                  <div class="preview-header"></div>
                  <div class="preview-content">
                    <div class="preview-card"></div>
                    <div class="preview-card"></div>
                  </div>
                </div>
                <div class="theme-info">
                  <h4>
                    <el-icon><Moon /></el-icon>
                    深色主题
                  </h4>
                  <p>适合夜间使用的护眼界面</p>
                </div>
              </div>
            </div>

            <div class="auto-theme-setting">
              <div class="setting-header">
                <el-switch
                  v-model="autoTheme"
                  :active-icon="Clock"
                  @change="toggleAutoTheme"
                />
                <span class="setting-title">自动切换主题</span>
              </div>
              <p class="setting-description">
                根据系统时间自动在浅色和深色主题间切换（6:00-18:00 为浅色主题）
              </p>
              <el-alert
                v-if="autoTheme"
                title="已启用自动主题切换"
                type="info"
                :closable="false"
                show-icon
              >
                <template #default>
                  <span>当前时间: {{ currentTime }}，系统将自动选择合适的主题</span>
                </template>
              </el-alert>
            </div>
          </div>
        </el-tab-pane>

        <!-- 服务管理 -->
        <el-tab-pane label="服务管理" name="services">
          <div class="setting-section">
            <div class="section-header">
              <h3>
                <el-icon><List /></el-icon>
                服务配置
              </h3>
              <el-button type="primary" @click="showAddServiceDialog" :icon="Plus">
                添加新服务
              </el-button>
            </div>
            <p class="section-description">管理WebAPI服务配置</p>

            <!-- 服务列表 -->
            <div class="services-list" v-if="services.length > 0">
              <el-table :data="services" style="width: 100%">
                <el-table-column prop="name" label="服务名称" min-width="150">
                  <template #default="{ row }">
                    <div class="service-name">
                      <el-icon><Monitor /></el-icon>
                      {{ row.name }}
                    </div>
                  </template>
                </el-table-column>
                <el-table-column prop="description" label="描述" min-width="200" show-overflow-tooltip />
                <el-table-column prop="executablePath" label="可执行文件" min-width="250" show-overflow-tooltip />
                <el-table-column prop="autoStart" label="自动启动" width="100" align="center">
                  <template #default="{ row }">
                    <el-switch 
                      v-model="row.autoStart" 
                      @change="updateServiceAutoStart(row)"
                      :loading="autoStartLoading[row.id]"
                    />
                  </template>
                </el-table-column>
                <el-table-column label="操作" width="160" align="center">
                  <template #default="{ row }">
                    <el-button-group>
                      <el-button size="small" :icon="Edit" @click="editService(row)">
                        编辑
                      </el-button>
                      <el-button 
                        size="small" 
                        type="danger" 
                        :icon="Delete" 
                        @click="confirmDeleteService(row)"
                      >
                        删除
                      </el-button>
                    </el-button-group>
                  </template>
                </el-table-column>
              </el-table>
            </div>

            <el-empty v-else description="暂无服务配置" :image-size="120">
              <template #image>
                <el-icon size="120" color="#dcdfe6"><Box /></el-icon>
              </template>
              <el-button type="primary" @click="showAddServiceDialog">添加第一个服务</el-button>
            </el-empty>
          </div>
        </el-tab-pane>

        <!-- 系统设置 -->
        <el-tab-pane label="系统设置" name="system">
          <div class="setting-section">
            <h3>
              <el-icon><Tools /></el-icon>
              系统配置
            </h3>
            <p class="section-description">系统运行相关设置</p>

            <div class="system-settings">
              <div class="setting-item">
                <div class="setting-label">
                  <h4>WebSocket 重连间隔</h4>
                  <p>WebSocket连接断开后的重连间隔时间（秒）</p>
                </div>
                <el-input-number
                  v-model="systemSettings.wsReconnectInterval"
                  :min="1"
                  :max="60"
                  @change="updateSystemSettings"
                />
              </div>

              <div class="setting-item">
                <div class="setting-label">
                  <h4>日志保留行数</h4>
                  <p>每个服务保留的最大日志行数</p>
                </div>
                <el-input-number
                  v-model="systemSettings.maxLogLines"
                  :min="100"
                  :max="5000"
                  :step="100"
                  @change="updateSystemSettings"
                />
              </div>

              <div class="setting-item">
                <div class="setting-label">
                  <h4>自动刷新间隔</h4>
                  <p>服务状态自动刷新间隔（秒，0为关闭）</p>
                </div>
                <el-input-number
                  v-model="systemSettings.autoRefreshInterval"
                  :min="0"
                  :max="300"
                  :step="5"
                  @change="updateSystemSettings"
                />
              </div>
            </div>
          </div>
        </el-tab-pane>
      </el-tabs>
    </el-card>

    <!-- 添加/编辑服务对话框 -->
    <el-dialog 
      v-model="addServiceDialogVisible" 
      :title="editingService ? '编辑服务' : '添加服务'"
      width="600px"
      @close="resetServiceForm"
    >
      <el-form :model="serviceForm" :rules="serviceFormRules" ref="serviceFormRef" label-width="120px">
        <el-form-item label="服务名称" prop="name">
          <el-input v-model="serviceForm.name" placeholder="输入服务名称" />
        </el-form-item>
        <el-form-item label="服务描述" prop="description">
          <el-input v-model="serviceForm.description" placeholder="输入服务描述（可选）" />
        </el-form-item>
        <el-form-item label="可执行文件" prop="executablePath">
          <el-input v-model="serviceForm.executablePath" placeholder="选择或输入exe文件路径">
            <template #append>
              <el-button @click="selectExecutable" :icon="FolderOpened">选择</el-button>
            </template>
          </el-input>
        </el-form-item>
        <el-form-item label="工作目录" prop="workingDirectory">
          <el-input v-model="serviceForm.workingDirectory" placeholder="工作目录（可选，默认为exe所在目录）" />
        </el-form-item>
        <el-form-item label="启动参数" prop="arguments">
          <el-input v-model="serviceForm.argumentsString" placeholder="启动参数（可选）" />
        </el-form-item>
        <el-form-item label="自动启动">
          <el-switch v-model="serviceForm.autoStart" />
        </el-form-item>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="addServiceDialogVisible = false">取消</el-button>
          <el-button type="primary" @click="submitServiceForm" :loading="submitLoading">
            {{ editingService ? '更新' : '添加' }}
          </el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted, watch } from 'vue'
import { ElMessage, ElMessageBox, ElNotification } from 'element-plus'
import type { FormInstance, FormRules } from 'element-plus'
import { 
  Setting, Sunny, Moon, Clock, List, Plus, Monitor, Edit, Delete, 
  Box, Tools, FolderOpened 
} from '@element-plus/icons-vue'
import { ServiceAPI } from '../services/api'

// 定义props和emits
interface Props {
  services: any[]
}

interface Emits {
  (e: 'refresh-services'): void
  (e: 'theme-changed', theme: string): void
}

const props = defineProps<Props>()
const emit = defineEmits<Emits>()

// 响应式数据
const activeTab = ref('theme')
const currentTheme = ref('light')
const autoTheme = ref(false)
const currentTime = ref('')

const addServiceDialogVisible = ref(false)
const editingService = ref<any>(null)
const submitLoading = ref(false)
const autoStartLoading = reactive<Record<string, boolean>>({})

// 系统设置
const systemSettings = reactive({
  wsReconnectInterval: 5,
  maxLogLines: 1000,
  autoRefreshInterval: 30
})

// 表单相关
const serviceFormRef = ref<FormInstance>()
const serviceForm = reactive({
  name: '',
  description: '',
  executablePath: '',
  workingDirectory: '',
  argumentsString: '',
  autoStart: false
})

const serviceFormRules: FormRules = {
  name: [
    { required: true, message: '请输入服务名称', trigger: 'blur' }
  ],
  executablePath: [
    { required: true, message: '请选择可执行文件', trigger: 'blur' }
  ]
}

// 主题相关方法
const setTheme = (theme: string) => {
  currentTheme.value = theme
  saveTheme(theme)
  emit('theme-changed', theme)
  ElMessage.success(`已切换到${theme === 'light' ? '浅色' : '深色'}主题`)
}

const toggleAutoTheme = (enabled: boolean) => {
  if (enabled) {
    setupAutoTheme()
    ElMessage.success('已启用自动主题切换')
  } else {
    ElMessage.info('已关闭自动主题切换')
  }
  localStorage.setItem('autoTheme', enabled.toString())
}

const setupAutoTheme = () => {
  const hour = new Date().getHours()
  const theme = (hour >= 6 && hour < 18) ? 'light' : 'dark'
  if (theme !== currentTheme.value) {
    setTheme(theme)
  }
}

const saveTheme = (theme: string) => {
  localStorage.setItem('theme', theme)
}

const loadTheme = () => {
  const savedTheme = localStorage.getItem('theme') || 'light'
  const savedAutoTheme = localStorage.getItem('autoTheme') === 'true'
  
  currentTheme.value = savedTheme
  autoTheme.value = savedAutoTheme
  
  if (savedAutoTheme) {
    setupAutoTheme()
  }
  
  emit('theme-changed', currentTheme.value)
}

// 服务管理方法
const showAddServiceDialog = () => {
  editingService.value = null
  addServiceDialogVisible.value = true
}

const editService = (service: any) => {
  editingService.value = service
  // 填充表单
  serviceForm.name = service.name
  serviceForm.description = service.description || ''
  serviceForm.executablePath = service.executablePath || ''
  serviceForm.workingDirectory = service.workingDirectory || ''
  serviceForm.argumentsString = service.arguments ? service.arguments.join(' ') : ''
  serviceForm.autoStart = service.autoStart || false
  
  addServiceDialogVisible.value = true
}

const resetServiceForm = () => {
  Object.assign(serviceForm, {
    name: '',
    description: '',
    executablePath: '',
    workingDirectory: '',
    argumentsString: '',
    autoStart: false
  })
  serviceFormRef.value?.resetFields()
}

const selectExecutable = () => {
  ElMessage.info('请手动输入可执行文件路径')
}

const submitServiceForm = async () => {
  if (!serviceFormRef.value) return
  
  try {
    // 验证表单
    await serviceFormRef.value.validate()
    submitLoading.value = true
    
    const serviceConfig = {
      id: editingService.value?.id || Date.now().toString(),
      name: serviceForm.name,
      description: serviceForm.description,
      executablePath: serviceForm.executablePath,
      workingDirectory: serviceForm.workingDirectory || undefined,
      arguments: serviceForm.argumentsString ? serviceForm.argumentsString.split(' ') : undefined,
      autoStart: serviceForm.autoStart
    }
    
    console.log('正在提交服务配置:', serviceConfig)
    
    const response = await ServiceAPI.addService(serviceConfig)
    
    console.log('服务器响应:', response)
    
    if (response.success) {
      ElNotification.success({
        title: editingService.value ? '更新成功' : '添加成功',
        message: response.message || '服务配置已保存'
      })
      addServiceDialogVisible.value = false
      resetServiceForm()
      emit('refresh-services')
    } else {
      // 显示详细错误信息
      const errorMsg = response.error || response.message || '提交服务配置失败'
      console.error('提交失败:', errorMsg)
      
      ElNotification.error({
        title: '提交失败',
        message: errorMsg,
        duration: 5000
      })
      
      // 如果是权限问题，提供帮助信息
      if (errorMsg.includes('权限') || errorMsg.includes('EACCES') || errorMsg.includes('permission')) {
        ElMessageBox.alert(
          '请以管理员身份运行 PowerShell，执行以下命令修复权限：<br>' +
          '<code style="display:block;margin-top:10px;padding:10px;background:#f5f5f5;border-radius:4px;">' +
          '.\\fix-iis-permissions.ps1' +
          '</code>',
          '权限问题',
          {
            dangerouslyUseHTMLString: true,
            confirmButtonText: '我知道了'
          }
        )
      }
    }
  } catch (error: any) {
    console.error('提交服务配置异常:', error)
    
    // 区分验证错误和网络错误
    if (error.message && error.message.includes('validate')) {
      ElMessage.warning('请填写完整的服务信息')
    } else if (error.response) {
      // HTTP错误响应
      const status = error.response.status
      const data = error.response.data
      
      let errorMsg = '提交失败'
      if (status === 500) {
        errorMsg = '服务器内部错误，请检查后端日志'
      } else if (status === 403 || status === 401) {
        errorMsg = '权限不足，请联系管理员'
      } else if (data && data.error) {
        errorMsg = data.error
      }
      
      ElNotification.error({
        title: `提交失败 (HTTP ${status})`,
        message: errorMsg,
        duration: 5000
      })
    } else if (error.request) {
      // 请求已发送但没有响应
      ElNotification.error({
        title: '网络错误',
        message: '无法连接到后端服务，请检查后端服务是否启动',
        duration: 5000
      })
      
      // 提供帮助链接
      ElMessageBox.confirm(
        '后端 API 不可访问，请检查：<br>' +
        '1. IIS 站点是否正常运行<br>' +
        '2. 后端应用程序是否正确配置<br>' +
        '3. 查看 server/iisnode 目录下的日志<br><br>' +
        '是否查看故障排查文档？',
        '后端服务不可用',
        {
          dangerouslyUseHTMLString: true,
          confirmButtonText: '查看文档',
          cancelButtonText: '取消',
          type: 'warning'
        }
      ).then(() => {
        window.open('IIS故障排查指南.md', '_blank')
      }).catch(() => {})
    } else {
      // 其他错误
      ElMessage.error('提交服务配置失败：' + (error.message || '未知错误'))
    }
  } finally {
    submitLoading.value = false
  }
}

const updateServiceAutoStart = async (service: any) => {
  autoStartLoading[service.id] = true
  
  try {
    // 这里应该调用API更新自动启动设置
    // 暂时模拟延迟
    await new Promise(resolve => setTimeout(resolve, 500))
    ElMessage.success(`已${service.autoStart ? '启用' : '禁用'}自动启动`)
  } catch (error) {
    service.autoStart = !service.autoStart // 回滚状态
    ElMessage.error('更新自动启动设置失败')
  } finally {
    autoStartLoading[service.id] = false
  }
}

const confirmDeleteService = async (service: any) => {
  try {
    await ElMessageBox.confirm(
      `确定要删除服务"${service.name}"吗？此操作不可恢复。`,
      '确认删除',
      {
        confirmButtonText: '删除',
        cancelButtonText: '取消',
        type: 'warning',
      }
    )
    
    const response = await ServiceAPI.deleteService(service.id)
    if (response.success) {
      ElNotification.success({
        title: '删除成功',
        message: response.message
      })
      emit('refresh-services')
    } else {
      ElMessage.error(response.error)
    }
  } catch (error) {
    if (error !== 'cancel') {
      console.error('删除服务失败:', error)
      ElMessage.error('删除服务失败')
    }
  }
}

// 系统设置方法
const updateSystemSettings = () => {
  // 保存系统设置到localStorage
  localStorage.setItem('systemSettings', JSON.stringify(systemSettings))
  ElMessage.success('系统设置已保存')
}

const loadSystemSettings = () => {
  const saved = localStorage.getItem('systemSettings')
  if (saved) {
    Object.assign(systemSettings, JSON.parse(saved))
  }
}

// 更新当前时间
const updateCurrentTime = () => {
  const now = new Date()
  currentTime.value = now.toLocaleString('zh-CN', {
    year: 'numeric',
    month: '2-digit',
    day: '2-digit',
    hour: '2-digit',
    minute: '2-digit',
    second: '2-digit'
  })
}

// 生命周期
onMounted(() => {
  loadTheme()
  loadSystemSettings()
  updateCurrentTime()
  
  // 每秒更新时间
  setInterval(updateCurrentTime, 1000)
})

// 监听自动主题切换
watch(() => autoTheme.value, (enabled) => {
  if (enabled) {
    // 每小时检查一次
    setInterval(() => {
      if (autoTheme.value) {
        setupAutoTheme()
      }
    }, 3600000)
  }
})
</script>

<style scoped>
.settings-container {
  padding: 20px;
  max-width: 1200px;
  margin: 0 auto;
}

.settings-card {
  min-height: 600px;
}

.settings-header h2 {
  margin: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--el-text-color-primary);
}

.settings-tabs {
  margin-top: 20px;
}

.setting-section {
  padding: 20px 0;
}

.setting-section h3 {
  margin: 0 0 8px 0;
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--el-text-color-primary);
}

.section-description {
  color: var(--el-text-color-secondary);
  margin: 0 0 24px 0;
  font-size: 14px;
}

.section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}

/* 主题设置样式 */
.theme-options {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 20px;
  margin-bottom: 32px;
}

.theme-option {
  border: 2px solid var(--el-border-color);
  border-radius: 12px;
  padding: 16px;
  cursor: pointer;
  transition: all 0.3s;
  background: var(--el-bg-color);
}

.theme-option:hover {
  border-color: var(--el-color-primary);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.theme-option.active {
  border-color: var(--el-color-primary);
  background: var(--el-color-primary-light-9);
}

.theme-preview {
  width: 100%;
  height: 120px;
  border-radius: 8px;
  margin-bottom: 12px;
  overflow: hidden;
  border: 1px solid var(--el-border-color);
}

.light-preview {
  background: #ffffff;
}

.light-preview .preview-header {
  height: 24px;
  background: #f5f7fa;
  border-bottom: 1px solid #e4e7ed;
}

.light-preview .preview-content {
  padding: 8px;
  height: calc(100% - 24px);
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.light-preview .preview-card {
  background: #ffffff;
  border: 1px solid #e4e7ed;
  border-radius: 4px;
  height: 20px;
}

.dark-preview {
  background: #1d1e1f;
}

.dark-preview .preview-header {
  height: 24px;
  background: #2b2c2d;
  border-bottom: 1px solid #3c3d3e;
}

.dark-preview .preview-content {
  padding: 8px;
  height: calc(100% - 24px);
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.dark-preview .preview-card {
  background: #262727;
  border: 1px solid #3c3d3e;
  border-radius: 4px;
  height: 20px;
}

.theme-info h4 {
  margin: 0 0 4px 0;
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--el-text-color-primary);
}

.theme-info p {
  margin: 0;
  color: var(--el-text-color-secondary);
  font-size: 13px;
}

.auto-theme-setting {
  border-top: 1px solid var(--el-border-color);
  padding-top: 20px;
}

.setting-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 8px;
}

.setting-title {
  font-weight: 500;
  color: var(--el-text-color-primary);
}

.setting-description {
  margin: 8px 0 0 0;
  color: var(--el-text-color-secondary);
  font-size: 13px;
}

/* 服务管理样式 */
.services-list {
  margin-top: 20px;
}

.service-name {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* 系统设置样式 */
.system-settings {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.setting-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px;
  border: 1px solid var(--el-border-color);
  border-radius: 8px;
  background: var(--el-bg-color-page);
}

.setting-label h4 {
  margin: 0 0 4px 0;
  color: var(--el-text-color-primary);
}

.setting-label p {
  margin: 0;
  color: var(--el-text-color-secondary);
  font-size: 13px;
}

.dialog-footer {
  text-align: right;
}

/* 弹窗样式优化 */
.el-dialog {
  border-radius: 12px;
}

.el-dialog__header {
  border-bottom: 1px solid var(--el-border-color);
  padding: 20px 24px 16px 24px;
}

.el-dialog__body {
  padding: 0;
}

/* 响应式优化 */
@media (max-width: 1200px) {
  .settings-container {
    max-width: 100%;
  }
}

@media (max-width: 768px) {
  .settings-container {
    padding: 10px;
  }
  
  .theme-options {
    grid-template-columns: 1fr;
  }
  
  .setting-item {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }
  
  .section-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }
  
  .services-list .el-table {
    font-size: 14px;
  }
  
  .service-name {
    font-size: 14px;
  }
}

/* 动画效果 */
.theme-option {
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.theme-option:hover {
  transform: translateY(-4px);
}

.setting-item {
  transition: all 0.3s ease;
}

.setting-item:hover {
  background-color: var(--el-fill-color-light);
  border-color: var(--el-border-color-dark);
}

/* 表格样式优化 */
.services-list .el-table .el-table__row:hover {
  background-color: var(--el-fill-color-light);
}

.services-list .el-table .el-button-group {
  display: flex;
  gap: 4px;
}

/* 滚动条样式 */
.settings-tabs .el-tabs__content {
  max-height: 70vh;
  overflow-y: auto;
}

.settings-tabs .el-tabs__content::-webkit-scrollbar {
  width: 6px;
}

.settings-tabs .el-tabs__content::-webkit-scrollbar-track {
  background: var(--el-fill-color-lighter);
  border-radius: 3px;
}

.settings-tabs .el-tabs__content::-webkit-scrollbar-thumb {
  background: var(--el-fill-color-dark);
  border-radius: 3px;
}

.settings-tabs .el-tabs__content::-webkit-scrollbar-thumb:hover {
  background: var(--el-fill-color-darker);
}

/* 深色主题下的特殊样式 */
.theme-dark .settings-header h2 {
  color: var(--el-text-color-primary) !important;
}

.theme-dark .setting-section h3 {
  color: var(--el-text-color-primary) !important;
}

.theme-dark .section-description {
  color: var(--el-text-color-secondary) !important;
}

.theme-dark .theme-info h4 {
  color: var(--el-text-color-primary) !important;
}

.theme-dark .theme-info p {
  color: var(--el-text-color-secondary) !important;
}

.theme-dark .setting-title {
  color: var(--el-text-color-primary) !important;
}

.theme-dark .setting-description {
  color: var(--el-text-color-secondary) !important;
}

.theme-dark .setting-label h4 {
  color: var(--el-text-color-primary) !important;
}

.theme-dark .setting-label p {
  color: var(--el-text-color-secondary) !important;
}

.theme-dark .theme-option {
  background: var(--el-bg-color-overlay) !important;
  border-color: var(--el-border-color) !important;
}

.theme-dark .theme-option:hover {
  border-color: var(--el-color-primary) !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3) !important;
}

.theme-dark .theme-option.active {
  border-color: var(--el-color-primary) !important;
  background: rgba(64, 158, 255, 0.1) !important;
}

.theme-dark .setting-item {
  background: var(--el-bg-color-overlay) !important;
  border-color: var(--el-border-color) !important;
}

.theme-dark .setting-item:hover {
  background-color: var(--el-fill-color-light) !important;
  border-color: var(--el-border-color-dark) !important;
}

.theme-dark .service-name {
  color: var(--el-text-color-primary) !important;
}
</style>